<template>
	<view class="page" v-if="isLogin">

		<jyf-parser :html="msg"></jyf-parser>
		<view class="btn-box">
			<template>
				<button v-if="isDistributor" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="btn btn-suc"
					:style="{ background: objStyle.bg, color: objStyle.color }">
					申请成为分销员
				</button>
				<button v-if="!isDistributor" class="btn btn-ban">您已提交申请</button>
			</template>
		</view>
		<view class="record">
			<navigator hover-class="none" url="../record/record" class="navigator-class">
				<Icon class="align-middle" type="icondingdan" color="#fff" size="20"></Icon>
				<text class="align-middle">申请记录</text>
			</navigator>
		</view>

		<block v-if="isInviteCodeDisplay == 1">
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="input" mode="input" title="填写邀请码" message="成功消息" cancelText="无邀请码" :value="inviteCode" color="#FF5C6D" :duration="2000"
					:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			</uni-popup>
		</block>

	</view>
</template>

<script>
	import Icon from '@/components/Icon/Icon.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import jyfParser from '@/components/jyf-parser/jyf-parser';
	let App = getApp().globalData;
	import {
		store,
		mutations
	} from '@/store/index.js';
	export default {
		components: {
			Icon,
			uniPopup,
			uniPopupDialog,
			jyfParser
		},
		name: 'recruit', // 招募分销员
		data() {
			return {
				copy: {
					title: '招募令',
					msg: '申请成为分销员'
				},
				msg: "",
				inviteCode: '', // 邀请码
				bg: '/static/bg.jpg',
				isDistributor: false, //是否已申请分销员
				distributor_id: '',
				objStyle: {
					bg: '#FF5F6F',
					color: '#fff'
				},
				image_header: '',
				isLogin: false, //是否登陆
				isInviteCodeDisplay: 0, //==1 显示邀请码
			};
		},
		async onLoad(options) {
			await this.$onLaunched;

			this.image_header = this.$store.image_header;

			// #ifdef MP-WEIXIN
			if (!options.distributor_id && !options.d) {
				options = getApp().globalData.getOnLaunchParam(options);
			}
			// #endif

			if (options && (options.distributor_id || options.d)) {
				this.distributor_id = options.distributor_id ? options.distributor_id : options.d;
				if (!App.XcxData.userInfo) {
					// 在申请分销员如果没有登录,存储登录后的跳转路径
					uni.setStorageSync('loginCallbackAdr', '/pages/distribution/recruit/recruit?distributor_id=' + options.distributor_id);
				}
			}

			if (!App.loginState()) {
				App.toMyLogin('/pages/distribution/recruit/recruit?distributor_id=' + this.distributor_id)
			} else {
				this.getUserStatus();
				this.isLogin = true;
			}
		},
		methods: {
			getUserStatus() {
				let obj = {};
				this.$request('Distribution/MiniApply/getUserStatus', obj).then(res => {
					console.log(res);
					// {data--'1':分销员,2:已申请,3:可以申请}		
					if (res.status == 1) {
						this.isInviteCodeDisplay = res.isInviteCodeDisplay;
						if (res.data === 1) {
							uni.reLaunch({
								url: '../center/center'
							});
						} else if (res.data === 3) {
							this.isDistributor = true;
							this.getInviteCopy();
						} else {
							this.isDistributor = false;
							this.getInviteCopy();
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							// #ifndef MP-ALIPAY
							duration: 1500,
							// #endif
						})
					}
				});
			},

			// 获取文案
			getInviteCopy() {
				this.$request('Distribution/MiniApply/getInviteCopy').then(res => {
					if (res.status === 1) {
						this.msg = res.data.official_writer;
						this.objStyle['bg'] = res.data.official_btn_color;
						this.objStyle['color'] = res.data.official_text_color;
					} else {
						App.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(e => {
					console.log(e);
				});
			},

			// 获取手机号码
			decryptPhoneNumber(e) {
				let _self = this;
				let p = new Promise((resolve, reject) => {
					if (e.detail.errMsg == 'getPhoneNumber:ok') {
						// 允许授权执行跳转
						var session_key = uni.getStorageSync('userInfo').session_key;
						let obj = {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							session_key: session_key,
							appId: App.XcxData.appid
						};
						this.$request('SmallProgramApi/Vip/getPhone', obj).then(res => {
							console.log(res);
							if (res.status === 1) {
								_self.phone = res.data.phoneNumber;
								resolve(res.data.phoneNumber);
							} else {
								App.showToast({
									title: res.msg,
									icon: 'none'
								});
								return false;
							}
						});
					} else {
						//用户点击拒绝
						App.showToast({
							title: '拒绝授权将无法申请成为分销员',
							icon: 'none'
						});
						return false;
					}
				});
				p.then(() => {
					if (!this.distributor_id && this.isInviteCodeDisplay == 1) {
						console.log('this.isInviteCodeDisplay', this.isInviteCodeDisplay)
						console.log('!this.distributor_id', !this.distributor_id)
						//没有分销员id 并且后台设置的可以弹窗填邀请码
						this.$refs.popup.open();
					} else {
						this.applyFor();
					}
					// _self.applyFor(phone);
				});
			},

			// 用户申请成为分销员
			applyFor(value) {
				let _self = this;
				uni.showLoading({
					title: '申请提交...'
				})
				let obj = {
					distributor_id: this.distributor_id, // 邀请人id,
					mobile: _self.phone,
					invite_code: value || ''
				};
				this.$request('Distribution/MiniApply/userApplyDistributor', obj).then(res => {
					uni.hideLoading();
					if (res.status === 1) {
						// status {0待审核 2 无需审核}
						App.showToast({
							title: res.msg,
							icon: 'none'
						});

						let isDistributor = res.data.status == 2 ? true : false;
						_self.isDistributor = isDistributor;
						// 需要审核 改变状态 不需要审核  跳转至分销员中心
						if (isDistributor) {
							store.invite = {}
							uni.reLaunch({
								url: '../center/center'
							});
						} else {
							App.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						_self.inviteCode = ''
					} else {
						App.showToast({
							title: res.msg,
							icon: 'none'
						});
						_self.inviteCode = ''
					}
				});
			},

			close(done) {
				this.$refs.popup.close();
				this.applyFor();
				done();
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(done, value) {
				this.$refs.popup.open();
				console.log(value);
				if (value) {
					this.inviteCode = value;
					this.applyFor(value);
				} else {
					App.showToast({
						title: '你还没有填写邀请码',
						icon: 'none'
					});
				}
				done();
			}
		}
	};
</script>

<style lang="less">
	@import '@/common/index.less';

	page {
		padding-bottom: 0;
	}

	.page {
		position: relative;
	}

	.recruit-bg {
		width: 100vw;
		height: 100vh;
	}

	.btn-box {
		position: fixed;
		bottom: 35rpx;
		left: 10%;
		width: 80%;

		.btn {
			border-radius: @semicircle;
			font-size: 30rpx;
		}

		.btn-suc {
			color: @white;
			.mainColor;
		}

		.btn-ban {
			border-radius: @semicircle;
			color: @color-lightgray;
			background: #ddd;
		}
	}

	.copy {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		color: @white;

		.title {
			font-size: 100rpx;
			margin: 50rpx 80rpx;
			letter-spacing: 5rpx;
			font-weight: 900;
		}

		.msg {
			max-width: 80%;
			margin: 0 auto;
			font-size: 60rpx;
			letter-spacing: 5rpx;
		}
	}

	.record {
		position: fixed;
		right: 0;
		bottom: 200rpx;
		background: #5c8df4;
		font-size: 28prx;
		box-sizing: border-box;
		padding: 5px 8px;
		border-radius: 25px 0 0 25px;
		color: #fff;

		.navigator-class {
			display: flex;
			align-items: center;
		}
	}
</style>
